<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>walleItem</title>



    <script src="./jquery/dist/jquery.min.js"></script>
    <script src="./popper.js/dist/umd/popper.min.js"></script>







    <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">


    <script src="./bootstrap/dist/js/bootstrap.min.js"></script>



    <link rel="stylesheet" href="./summernote/dist/summernote-bs4.css">
    <script src="./summernote/dist/summernote-bs4.js"></script>
    <!--<script src="./summernote/dist/lang/summernote-zh-CN.min.js"></script>-->



    <script src="./vue/dist/vue.min.js"></script>
    <script src="./moment/moment.js"></script>
    <script src="./moment/locale/zh-cn.js"></script>
</head>

<body>


    <div class="container" style="margin: 20px auto;" id="ezDetailApp">

        <div class="jumbotron">
            <!--<h1 class="display-3">Jumbo heading</h1>-->
            <p class="lead">{{ezDetailForm.sname}}</p>
            <!--<hr class="my-2">-->
            <!--<p>More info</p>-->
        </div>

        <div id="summernote1" class="summernote" v-html="ezDetailForm.note">

        </div>




    </div>


</body>

</html>


<script>


    var vm = new Vue({
        el: '#ezDetailApp',
        data: {


            ezDetailForm: {

                sid: '',
                note: '',
                ezIndex: {

                    sid: '',
                }
            },




        },


        filters: {

            fmtDate(date) {
                return date + moment(date).format('dddd');
            }
        },


        methods: {


            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },






            // 查询 cate
            queryDetail() {

                var _self = this;
                var sid = this.getQueryString("id");

                if (!sid) {
                    return;
                }



                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "./ezDetails/" + sid,
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            // console.log(response);
                            _self.ezDetailForm = response.dat;

                        }

                    }
                });
            },


            initSummernote() {

                $('#summernote1').summernote({

                    airMode: false,
                    // height: 300,                 // set editor height
                    minHeight: null,             // set minimum height of editor
                    maxHeight: null,             // set maximum height of editor
                    focus: true,                 // set focus to editable area after initializing summernote
                    placeholder: '',
                    tabsize: 2,
                    minHeight: 300,
                    // lang: 'zh-CN',
                    // dialogsFade: true, // Add fade effect on dialogs
                    // dialogsInBody: true, // Dialogs can be placed in body, not in
                    // summernote.
                    // disableDragAndDrop: false,// default false You can disable drag
                    // and drop

                    callbacks: {

                        onImageUpload: function (files, editor, $editable) {

                            // FormData，新的form表单封装，具体可百度，但其实用法很简单，如下
                            var data = new FormData();

                            // 将文件加入到file中，后端可获得到参数名为“file”
                            data.append("file", files[0]);

                            // ajax上传
                            $.ajax({
                                data: data,
                                type: "POST",
                                url: "/file-items/upload", // div上的action
                                cache: false,
                                contentType: false,
                                processData: false,

                                // 成功时调用方法，后端返回json数据
                                success: function (response) {

                                    console.log(response);

                                    if (response.code == 0) {

                                        // editor.insertImage($editable, '../' + response.path);
                                        $("#summernote1").summernote('insertImage',
                                            '../' + response.dat.uploadName);
                                    }
                                },
                                // ajax请求失败时处理
                                error: function () {
                                    alert("上传失败！")
                                }
                            });



                        }
                    }
                });

                // $('#summernote1').summernote('fontSize', 20);
            },



        },
        mounted() {

            // this.ezDetailForm.ezIndex.sid = this.getQueryString("index-id");
            this.queryDetail();

            // this.initSummernote();
        }
    })


</script>